{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"_Notes from Sep 7, 2017, CS110 Introduction to Computing, Bryn Mawr College. [Douglas Blank](mailto:dblank@cs.brynmawr.edu)._"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 1. What can you do with Processing?"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Some examples:\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"* [my twitter likes](https://twitter.com/favorites) @DougBlank\n",
"* http://www.openprocessing.org/\n",
"* https://processing.org/examples/\n",
"\n",
"Now, let's see what you can do! "
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 2. Jupyter and Processing"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 2.1 Jupyter"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Jupyter is the name of the system that you log into. It is running on a server at Bryn Mawr College. It allows you to run code in a variety of programming languages inside things called \"notebooks.\" Each notebook is made up of cells. Cells can have text (called \"markdown\", like this text).\n",
"\n",
"You can turn on Spell-checking and the in-class exercise Submit by:\n",
"\n",
"1. Turning on the Spell-check and Submit extension in the Nbextensions Tab.\n",
"2. Clicking the button in the toolbar.\n",
"\n",
"You can control how a cell is treated (code or markdown) by selecting from the picklist in the toolbar. You can select Markdown (like this cell), or Code. You can edit a markdown cell by double-clicking it, editing it, and then Shift+Enter.\n",
"\n",
"**New function**:\n",
"\n",
"```\n",
"text(\"String in double quotes\", x, y);\n",
"```\n",
"\n",
"**NOTE**: On your Lab1, make sure you put your name on your art using the Text() function."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can put code in a cell, like this:"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_1\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
"\n",
"\n",
" var output_area = this;\n",
" // find my cell element\n",
" var cell_element = output_area.element.parents('.cell');\n",
" // which cell is it?\n",
" var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
" // get the cell object\n",
" var cell = Jupyter.notebook.get_cell(cell_idx);\n",
"\n",
" function jyp_print(cell, newline) {\n",
" return function(message) {\n",
" cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
" content: {text: message + newline,\n",
" name: \"stdout\"}});\n",
" }\n",
" }\n",
" window.jyp_println = jyp_print(cell, \"\\n\");\n",
" window.jyp_print = jyp_print(cell, \"\");\n",
"\n",
" require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
" Processing.logger.println = jyp_print(cell, \"\\n\");\n",
" Processing.logger.print = jyp_print(cell, \"\");\n",
" });\n",
"\n",
"\n",
" "
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"
\n",
" Sketch #1: \n",
" \n",
"
\n",
"
\n",
" \n",
" \n",
" \n",
" \n",
"
\n",
"Sketch #1 state:Loading... \n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"fill(0);\n",
"text(\"This is a sketch\", 10, 15);\n",
"text(\"You can write\", 10, 30);\n",
"text(\"and draw:\", 10, 45);\n",
"fill(255, 0, 0);\n",
"ellipse(50, 75, 25, 25);"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Cells should be run sequentially, from top to bottom. You can get information on how to use the notebook for writing here: [Jupyter Notebook Users Manual](http://jupyter.cs.brynmawr.edu/hub/dblank/public/Jupyter%20Notebook%20Users%20Manual.ipynb).\n",
"\n",
"Tips:\n",
"\n",
"* You can press `SHIFT+TAB` after a name to get help on it\n",
"* you can press `TAB` after a few letters to complete the variable or function \n",
"\n",
"You can create text with headings, styles, and even create equations, like:\n",
"\n",
"$$ \\left(\\!\n",
" \\begin{array}{c}\n",
" n \\\\\n",
" r\n",
" \\end{array}\n",
" \\!\\right) = \\frac{n!}{r!(n-r)!} $$\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 2.2 Processing"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Processing is a programming language. You write programs as \"sketches.\" Each sketch goes into a Jupyter cell.\n",
"\n",
"The **syntax** of the Processing language is a subset of the Java programming language. "
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 3. Functions"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Functions to explore:\n",
"\n",
"* size(width, height)\n",
"* point(x, y)\n",
"* line(x1, y1, x2, y2)\n",
"* triangle(x1, y1, x2, y2, x3, y3)\n",
"* rect(x, y, w, h)\n",
"* quad(x1, y1, x2, y2, x3, y3, x4, y4)\n",
"* ellipse(x, y, w, h)\n",
"\n",
"All of the shapes are listed at [processingjs.org/reference](http://processingjs.org/reference)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"When done, Save the Sketch, and click on the Submit button in the toolbar. Select **dsblank**, and **CS110-Practice-Sep-7**.\n",
"\n",
"You can also click on the Publish . That will give you a URL that you can share with friends and family."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 4. Workflow"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"1. Before you login (or after you logout), go to [jupyter.brynmawr.edu](https://jupyter.brynmawr.edu)\n",
"2. Click the link for this, opening in a new tab\n",
"3. Go back to the login page and login"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Calysto Processing",
"language": "java",
"name": "calysto_processing"
},
"language_info": {
"codemirror_mode": {
"name": "text/x-java",
"version": 2
},
"file_extension": ".java",
"mimetype": "text/x-java",
"name": "java"
}
},
"nbformat": 4,
"nbformat_minor": 1
}